<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="${pageContext.request.contextPath}/static/assets/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/font-awesome.min.css"/>
    <link href="${pageContext.request.contextPath}/static/assets/css/codemirror.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/font/css/font-awesome.min.css"/>

    <script src="${pageContext.request.contextPath}/static/assets/js/ace-extra.min.js"></script>

    <script src="${pageContext.request.contextPath}/static/js/jquery-1.9.1.min.js" type="text/javascript"></script>

    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/assets/js/bootstrap.min.js"></script>
    <title>交易</title>
</head>

<body>
<div class=" page-content clearfix">
    <div class="transaction_style">
        <ul class="state-overview clearfix">
            <li class="Info">
                <span class="symbol red"><i class="fa fa-jpy"></i></span>
                <span class="value"><h4>交易金额</h4><p class="Quantity color_red">34565.68</p></span>
            </li>
            <li class="Info">
                <span class="symbol  blue"><i class="fa fa-shopping-cart"></i></span>
                <span class="value"><h4>订单数量</h4><p class="Quantity color_red">5656</p></span>
            </li>
            <li class="Info">
                <span class="symbol terques"><i class="fa fa-shopping-cart"></i></span>
                <span class="value"><h4>交易成功</h4><p class="Quantity color_red">34565</p></span>
            </li>
            <li class="Info">
                <span class="symbol yellow"><i class="fa fa-shopping-cart"></i></span>
                <span class="value"><h4>交易失败</h4><p class="Quantity color_red">34</p></span>
            </li>
            <li class="Info">
                <span class="symbol darkblue"><i class="fa fa-jpy"></i></span>
                <span class="value"><h4>退款金额</h4><p class="Quantity color_red">3441.68</p></span>
            </li>
        </ul>

    </div>
    <div class="t_Record">
        <div id="main" style="height:500px; overflow:hidden; width:100%; overflow:auto">

        </div>
    </div>
</div>
</body>

<script type="text/javascript">
    $(function (){
        $(".t_Record").width($(window).width() - 60);
        //当文档窗口发生改变时 触发
        $(window).resize(function () {
            $(".t_Record").width($(window).width() - 60);
        });
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '月购买订单交易记录',
                subtext: '实时获取用户订单购买记录'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['所有订单', '待付款', '已付款', '代发货']
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '所有订单',
                    type: 'bar',
                    data: [120, 49, 70, 232, 256, 767, 1356, 1622, 326, 200, 164, 133],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    }
                },
                {
                    name: '待付款',
                    type: 'bar',
                    data: [26, 59, 30, 84, 27, 77, 176, 1182, 487, 188, 60, 23],
                    markPoint: {
                        data: [
                            {name: '年最高', value: 1182, xAxis: 7, yAxis: 1182, symbolSize: 18},
                            {name: '年最低', value: 23, xAxis: 11, yAxis: 3}
                        ]
                    },


                }
                , {
                    name: '已付款',
                    type: 'bar',
                    data: [26, 59, 60, 264, 287, 77, 176, 122, 247, 148, 60, 23],
                    markPoint: {
                        data: [
                            {name: '年最高', value: 172, xAxis: 7, yAxis: 172, symbolSize: 18},
                            {name: '年最低', value: 23, xAxis: 11, yAxis: 3}
                        ]
                    },

                }
                , {
                    name: '代发货',
                    type: 'bar',
                    data: [26, 59, 80, 24, 87, 70, 175, 1072, 48, 18, 69, 63],
                    markPoint: {
                        data: [
                            {name: '年最高', value: 1072, xAxis: 7, yAxis: 1072, symbolSize: 18},
                            {name: '年最低', value: 22, xAxis: 11, yAxis: 3}
                        ]
                    },

                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    });

</script>